<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理 - 管理员面板</title>
    <link rel="stylesheet" href="./../../static/manager/css/style.css">
    <script src="./../../static/manager/js/teacher.js"></script>
</head>
<body>
<header class="navbar">
    <div class="logo">AdminPanel</div>
    <h1>管理员控制面板</h1>
    <div class="user-info">
        <img src="/img/admin-avatar.jpg" alt="Admin Avatar" class="avatar">
        <span>管理员</span>
        <button class="logout-btn">退出</button>
    </div>
</header>

<aside class="sidebar">
    <ul>
        <li><a href="index.html">工作首页</a></li>
        <li><a href="activity.html">活动管理</a></li>
        <li><a href="class.html">教学班管理</a></li>
        <li><a href="student.html">学员管理</a></li>
        <li><a href="teacher.html">教师管理</a></li>
    </ul>
</aside>

<main>
    <section class="teacher-management">
        <h2>教师管理</h2>

        <!-- 教师搜索功能 -->
        <div class="search-box">
            <input type="text" id="search-teacher" placeholder="搜索教师..." oninput="searchTeacher()">
            <button onclick="openModal('create')">新增教师</button>
        </div>

        <!-- 教师列表 -->
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>邮箱</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="teacher-table-body">
            <!-- 动态加载教师数据 -->
            </tbody>
        </table>

        <!-- 弹窗 (Modal) -->
        <div id="teacher-modal" class="modal">
            <div class="modal-content">
                <span class="close-btn" onclick="closeModal()">&times;</span>
                <h3 id="modal-title">新增教师</h3>
                <form id="teacher-form" onsubmit="submitForm(event)">
                    <input type="hidden" id="teacher-id" name="teacher-id">
                    <label for="teacher-name">用户名：</label>
                    <input type="text" id="teacher-name" name="teacher-name" required>

                    <label for="teacher-realname">姓名：</label>
                    <input type="text" id="teacher-realname" name="teacher-realname" required>

                    <label for="teacher-contact">联系方式：</label>
                    <input type="text" id="teacher-contact" name="teacher-contact" required>

                    <label for="teacher-email">邮箱：</label>
                    <input type="email" id="teacher-email" name="teacher-email" required>

                    <label for="teacher-status">状态：</label>
                    <select id="teacher-status" name="teacher-status" required>
                        <option value="active">激活</option>
                        <option value="inactive">未激活</option>
                    </select>

                    <div class="button-container">
                        <button type="submit" id="save-btn">保存</button>
                        <button type="button" id="cancel-btn" onclick="closeModal()">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</main>

<footer class="footer">
    <p>© 2024 AdminPanel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
</footer>
</body>
</html>
